<template>
	<view class="m-nav" :style="mNavStyle">
    <view class="m-nav-fixed" :style="[{height:TitleBar + 'px'}]">
      <view class="left" @tap="tapLeft" v-if="isLeft">
        <m-icon :color="backColor" type="back" size="25"></m-icon>
      </view>
      <view class="content" :style="[{top:StatusBar + 'px'}]">
        <slot name="content"></slot>
      </view>
      <view class="right" v-if="isRight">
        <slot name="right"></slot>
      </view>
    </view>
	</view>
</template>

<script>
	import mIcon from '@/components/m-icon/m-icon.vue';
	export default {
	  name: "m-nav",
	  components: {
	    mIcon
	  },
    data(){
    	return {
    		StatusBar: this.StatusBar,
        TitleBar: this.TitleBar,
    		CustomBar: this.CustomBar
    	};
    },
    computed:{
      mNavStyle() {
        let arr = [];
        arr.push({height:this.CustomBar + 'px'});
        arr = arr.concat(this.navStyle);
        return arr;
      }
    },
    props: {
      navStyle: {
        type: Array,
        default: () => []
      },
      backColor: {
        type: String,
        value: "#000000"
      },
      isLeft: {
        type: [Boolean, String],
        default: true
      },
      isRight: {
        type: [Boolean, String],
        default: false
      },
    },
    
    created() {
      console.log(this.navStyle);
    },
    
		methods: {
			tapLeft() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style>
.m-nav {
  display: flex;
  top: 0px;
  position:fixed;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  width:100%;
  background: #ccc;
  z-index:10000;
}

.m-nav .m-nav-fixed {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: fixed;
  top:0px;
  width:100%;
}

.m-nav .left {
  position: absolute;
  left: 15rpx;
  width:100rpx;
}

.m-nav .right {
  position:absolute;
  right:15rpx;
  width:100rpx;
  display:flex;
  align-items:center;
  justify-content: center;
}

.m-nav .content {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  font-size:20px;
}

</style>
